
function YearSelect(options, optionFunction) {  // 封装选择框（参数：选择框选项， 选项点击的回调函数）
  const selectWrapper = document.createElement('div');
  let optionsHTML = []
  options.forEach(option => {
    let element = document.createElement('div')
    element.innerText = option
    element.className = "select-option"
    element.onclick = (event) => {
      optionFunction(event, element)
    }
    optionsHTML.push(element)
  });
  let select = document.createElement('div')
  select.className = "select"
  let selectOptions = document.createElement('div')
  selectOptions.className = "select-options"
  optionsHTML.forEach(item => {
    selectOptions.appendChild(item)
  })
  select.appendChild(selectOptions)
  selectWrapper.appendChild(select)
  return selectWrapper
}
//添加选择框
function addSelect(selectDataArray) {
  let select = YearSelect(selectDataArray, (event, element) => {
    let selectOption = document.getElementsByClassName("select-option")
    for (let i = 0; i < selectOption.length; i++) {
      selectOption[i].style = "font-weight: normal"
    }
    element.style = "font-weight: 600;"
    signUpInput.value = element.innerText
    event.stopPropagation()
  })
  signUpYear.appendChild(select)
  return select
}

//课程安排内容创建
function createcourseContentHTML(courseArrangementData, tab) {
  let tempCourseArrangementData = null
  if (tab == "全部") {
    tempCourseArrangementData = courseArrangementData
  } else {
    tempCourseArrangementData = courseArrangementData.filter(item => item.tags.indexOf(tab) != -1)
  }
  let courseContentHTML = ``
  tempCourseArrangementData.forEach(item => {
    let tagsHTML = ``
    item.tags.forEach(tag => {
      tagsHTML += `<div class="tag tag-${tag}">${tag}</div>`
    })
    courseContentHTML += `
    <!-- 课程安排内容项 -->
    <div class="course-item">
      <!-- 课程安排内容项左边 -->
      <div class="course-item-left">
        <!-- 课程安排内容项左边图片 -->
        <img class="course-item-img" src="${item.image}" />
      </div>
      <!-- 课程安排内容项右边 -->
      <div class="course-item-right">
        <!-- 课程安排内容项右边标题 -->
        <div class="course-item-title">
          ${item.title}
        </div>
        <!-- 课程安排内容项右边内容 -->
        <div class="course-item-content">
          ${item.content}
        </div>
        <!-- 课程安排内容项的标签栏 -->
        <div class="tags">
          ${tagsHTML}
        </div>
      </div>
    </div>
  `
  })

  return courseContentHTML;
}

function resetTabs(tabs) {
  for (let i = 0; i < tabs.length; i++) {
    tabs[i].className = "tab"
  }
}

window.onload = () => {
  // 获取dom元素
  const signUpYear = document.querySelector("#signUpYear"); // 年份div
  const signUpInput = document.getElementById("signUpInput"); // 年份输入框
  let selectDataArray = [2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021] // 年份选项
  let select = null // 存放选择框dom元素
  signUpYear.onclick = (event) => {
    if (select == null || select == undefined) { // 选择框不存在则创建
      select = addSelect(selectDataArray)
    }
    if (select.style.display != "none" && select.style.display != "") { // 创建后通过disply控制显示消失
      select.style.display = "none"
      signUpInput.className = "sign-up-input"

    } else {
      select.style.display = "grid" // 采用网格布局
      signUpInput.className = "sign-up-input-focus"

    }
    event.stopPropagation() // 阻止冒泡事件
  }
  document.addEventListener("click", () => { // 用于点击选择框外关闭选择框的监听器
    if (select != null) {
      select.style.display = "none"
      signUpInput.className = "sign-up-input"
    }
  })



  // 课程安排tabs切换
  let courseArrangementData = [ //课程安排数据
    {
      image: './images/courseArrangement.jpg',
      title: '第一课 这里是课程名称',
      content: '这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要。',
      tags: ['HTML']
    }, {
      image: './images/courseArrangement.jpg',
      title: '第二课 这里是课程名称',
      content: '这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要。',
      tags: ['CSS']
    }, {
      image: './images/courseArrangement.jpg',
      title: '第三课 这里是课程名称',
      content: '这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要。',
      tags: ['JavaScript']
    }, {
      image: './images/courseArrangement.jpg',
      title: '第四课 这里是课程名称',
      content: '这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要。',
      tags: ['HTML', 'CSS', 'JavaScript']
    }, {
      image: './images/courseArrangement.jpg',
      title: '第五课 这里是课程名称',
      content: '这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要。',
      tags: ['HTML', 'CSS', 'JavaScript']
    }, {
      image: './images/courseArrangement.jpg',
      title: '第六课 这里是课程名称',
      content: '这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要。',
      tags: ['HTML', 'CSS', 'JavaScript']
    }
  ]
  let tabs = document.querySelectorAll(".tab")
  let courseContent = document.querySelector("#courseContent")
  // 进行tab的事件绑定
  for (let i = 0; i < tabs.length; i++) {
    tabs[i].onclick = (event) => {
      resetTabs(tabs) // 重置tab的激活状态
      tabs[i].className = "tab tab-active"
      courseContent.innerHTML = createcourseContentHTML(courseArrangementData, tabs[i].title)
    }
  }


}